<template>
  <basic-container>
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-icon>
            <Connection/>
          </el-icon>
          <el-text size="large" tag="b"> 产品信息=> </el-text>
          <el-text size="large"> {{ detail.productName }}</el-text>
        </div>
      </template>

      <basic-container>
        <el-descriptions :column="2" size="small">
          <el-descriptions-item label="ProductKey :">
            {{ detail.productKey }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.detail.productKey" v-clipboard:success="onCopySuccess">复制</el-text>
          </el-descriptions-item>
          <el-descriptions-item label="ProductSecret :">
            {{ detail.productSecret }}
            <el-text type="primary" size="small" class="cursor" v-clipboard:copy="this.detail.productSecret" v-clipboard:success="onCopySuccess">复制</el-text>
        <!--<el-text type="primary" size="small" class="cursor">重置</el-text>-->
          </el-descriptions-item>
          <el-descriptions-item label="设备数量 :">
            [ {{deviceCount}} ]
            <el-text type="primary" size="small" class="cursor" @click="viewDevice">前往管理</el-text>
          </el-descriptions-item>
        </el-descriptions>
      </basic-container>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="产品信息" name="info">
          <product-info :product-key="this.productKey" :product-id="this.productId"></product-info>
        </el-tab-pane>
        <el-tab-pane label="Topic 类列表" name="topic">
          <product-topic :product-key="this.productKey" :product-id="this.productId"></product-topic>
        </el-tab-pane>
        <el-tab-pane label="功能定义" name="function">
          <product-function :product-key="this.productKey" :product-id="this.productId"></product-function>
        </el-tab-pane>
        <el-tab-pane label="消息解析" name="script">
          <product-script :product-key="this.productKey" :product-id="this.productId"></product-script>
        </el-tab-pane>
        <el-tab-pane label="服务端订阅" name="server">
          <product-relay :product-key="this.productKey" :product-id="this.productId"></product-relay>
        </el-tab-pane>
        <el-tab-pane label="设备子集" name="subset">
          <product-subset :product-key="this.productKey" :product-id="this.productId"></product-subset>
        </el-tab-pane>
        <el-tab-pane label="设备开发" name="device">
          <product-device :product-key="this.productKey" :product-id="this.productId"></product-device>
        </el-tab-pane>
    <!--<el-tab-pane label="文件上传配置" name="oss">
          <product-oss :product-key="this.productKey" :product-id="this.productId"></product-oss>
        </el-tab-pane>-->
      </el-tabs>

    </el-page-header>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {getDetailByKey} from "@/api/iot/product";
import {getDeviceCount} from "@/api/iot/device";

export default {
  data() {
    return {
      activeName: 'info',
      productId: '',
      productKey: '',
      deviceCount: 0,
      detail: {}
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      if (to.path !== from.path) {
        this.init();
      }
    },
  },
  methods: {
    init() {
      this.productId = this.$route.params.productId;
      this.productKey = this.$route.params.productKey;
      this.activeName = this.$route.query.activeKey || 'info';
      getDetailByKey(this.productKey).then(res => {
        this.detail = res.data.data;
      });
      getDeviceCount(this.productKey).then(res => {
        this.deviceCount = res.data.data;
      });
    },
    onBack() {
      this.$router.push({
        path: '/iot/product',
      });
      this.$router.$avueRouter.closeTag();
    },
    onCopySuccess() {
      this.$message.success('复制成功');
    },
    handleClick(tab, event) {
      this.$router.push({
        path: `/iot/product/detail/${this.productKey}/${this.productId}`,
        query:{
          activeKey: tab.paneName
        }
      });
    },
    viewDevice() {
      window.open(`/iot/device?productKey=${this.productKey}&productId=${this.productId}`);
    },
  }
};
</script>

<style>
.cursor {
  cursor: pointer;
}
</style>
